Requirements:
- Create a single page website (not required to be responsive)
- All code written from scratch
- Site will display at 1280px wide
- No placeholder text, only real content
- Light/dark mode control
- Contact form with full name, phone number, email address, preferred contact and comments
- Contact form validates through Javascript
- All files should be well organized, formatted, commented, and validate without errors
- Javascript uses either async or defer, and uses strict globally
- Site must contain either a cost calculator OR a product display and game play
This project inspired me to create a redesign of the existing website for Electric Fetus. Electric Fetus is an independently owned record store in Minneapolis, MN. The original site can be overwhelming for users with endless scrolling to get to the bottom of the page. Their site contains information for upcoming releases, featured albums, upcoming events, new albums, new singles, pre-orders, listening parties, music videos, Spotify playlists, products to buy and more. I wanted to create a home page that is more user friendly with only a few pieces of information, such as a short bio of the company, the most anticipated upcoming event, new releases and staff recommendations. The navigation bar directs to other separate pages where the user can look at more in depth information specific to events, shopping or searching for music.
I first began with sketching out a couple different design ideas for the site. After deciding which sketch to go with, I created a wireframe for it. The next step was to decide on a color scheme for the site. I went with muted green and orange tones, colors that are reflected in the design of the physical storefront. After that all the content was gathered together into folders. Text content is a mixture of my own words, lines from the original site, and online reviews of albums. Images were found online from various sites such as Pitchfork.com, Postpunkmonk.com and Google Images. The last step was to first complete the HTML, then the CSS, and finally the Javascript.
The part that I struggled with the most was writing the HTML and validating the form. It was tricky writing semantic code and creating a good information tree outline. Validating the form was confusing at first, but after multiple unsuccessful tries it finally worked. If I had more time and more experience with a project like this, my next step would be to focus on more details to add more depth to the page. I would like to see depth with the colors by using creative borders, shadows or gradients. I would also be interested in adding more creative hover styles, creating a new logo svg file, and adding more interaction to the page (maybe clicking on a New Release tile would spin it around to reveal the whole tracklist).
